import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { px2dp } from 'bee/utils/px2dp';
import { colors, sizes } from 'bee/themes';
import { Icon } from 'bee/components/Icon';

class CustomerAcquisition extends Component<Prop> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.leftContainer}>
          {/* <Image style={styles.icon} /> */}
          <View style={styles.icon}>
            <Icon
              name={this.props.iconName}
              color={this.props.iconColor}
              size={sizes.f4}
            />
          </View>
          <Text style={styles.acName}>{this.props.name}</Text>
        </View>
        <Text style={styles.number}>{this.props.number} 人</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: px2dp(90),
    width: '50%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: colors.white,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors['1104'],
  },
  leftContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
  icon: {
    // height: px2dp(33),
    // width: px2dp(35),
    marginLeft: px2dp(30),
    marginRight: px2dp(20),
    // backgroundColor: colors['1002'],
  },
  acName: {
    fontSize: sizes.f2,
    color: colors['1101'],
  },
  number: {
    paddingRight: px2dp(30),
    fontSize: sizes.f1,
    color: colors['1102'],
  },
});
export default CustomerAcquisition;
